<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <button @click="count++">点击次数：{{count}}</button>
    <button @click="destroyMe">销毁我</button>
  </div>
  
  <script src="js/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        count: 0
      },
      methods: {
        destroyMe() {
          this.$destroy();
        },
        printStatus(status) {
          console.group(`------${status}------`)
          if (this.$el) {
            console.log('this.$el.outerHTML: ', this.$el.outerHTML)
          } else {
            console.log('this.$el: ', this.$el)
          }
          console.log('this.$data: ', this.$data)
          console.log('this.count: ', this.count)
          console.groupEnd()
        }
      },
      beforeCreate() {
        console.group(`------ [beforeCreate] 创建之前------`)
        console.log('this.$el: ', this.$el)
        console.log('this.$data: ', this.$data)
        console.log('this.count: ', this.count)
        console.groupEnd()
      },
      created() {
        this.printStatus('[created] 创建完成')
      },
      beforeMount() {
        this.printStatus('[beforeMount] 挂载之前')
      },
      mounted() {
        this.printStatus('[mounted] 挂载完成')
      },
      beforeUpdate() {
        this.printStatus('[beforeUpdate] 修改之前')
      },
      updated() {
        this.printStatus('[updated] 修改完成')
      },
      beforeDestroy() {
        this.printStatus('[beforeDestroy] 销毁之前')
      },
      destroyed() {
        this.printStatus('[destroyed] 销毁完成')
      }
    });
  </script>
</body>
</html>